<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<!--自动刷新，1s=1-->
		<!--<META http-equiv="Refresh" content="3">-->
		<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
		<meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
		<!--禁止缓存-测试时用-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<!--禁止缓存-测试时用-->
		<!--禁止禁止识别电话号码和邮件-->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!--禁止禁止识别电话号码和邮件-->
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="screen-orientation" content="portrait">
		<meta name="full-screen" content="yes">
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<title>CSS实现的loading</title>
		<style type="text/css">
.Four{
            width: 50px;
            height: 50px;
            position: relative;
            margin-top:100px;
            margin-left: 100px;
        }
        .Four span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #0A0A0A;
            position: absolute;
            -webkit-animation: load 0.8s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                width: 8px;
                height: 8px;
            }
            100%{
                opacity: 0.2;
                width: 1px;
                height: 1px;
            }
        }
        .Four span:nth-child(1){
            left: 0;
            top: 50%;
            width: 8px;
            height: 8px;
            margin-top:-4px;
            -webkit-animation-delay:0.1s;
        }
        .Four span:nth-child(2){
            left: 7px;
            top: 7px;
            width: 7px;
            height: 7px;
            -webkit-animation-delay:0.2s;
        }
        .Four span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -4px;
            width: 6px;
            height: 6px;
            -webkit-animation-delay:0.3s;
        }
        .Four span:nth-child(4){
            top: 7px;
            right:7px;
            width: 5px;
            height: 5px;
            -webkit-animation-delay:0.4s;
        }
        .Four span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-4px;
            width: 4px;
            height: 4px;
            -webkit-animation-delay:0.5s;
        }
        .Four span:nth-child(6){
            right: 7px;
            bottom:7px;
            width: 3px;
            height: 3px;
            -webkit-animation-delay:0.6s;
        }
        .Four span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -4px;
            width: 2px;
            height: 2px;
            -webkit-animation-delay:0.7s;
        }
        .Four span:nth-child(8){
            bottom: 7px;
            left: 7px;
            width: 1px;
            height: 1px;
            -webkit-animation-delay:0.8s;
        }
		</style>
	</head>

	<body>
 <div class="Four">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
	</div>
	</body>

</html>